<template>
    <div class="all">
        <card
            v-for="(item, index) in moduleList"
            :key="item.title + index"
            class="mb10">
            <template v-slot:title>
                <div class="title-box van-hairline--bottom">
                    {{item.title}}
                </div>
            </template>
            <template v-slot:content>
                <div class="content">
                    <div
                        v-for="(app, index) in item.appList"
                        :key="app.img + index"
                        class="app van-hairline--right">
                        <div
                            @click="toPage(app)"
                            class="app-item">
                            <van-image
                                v-if="app.img"
                                fit="contain"
                                width="50"
                                height="50"
                                :src="app.img" />
                            <div class="app-name">{{ app.name }}</div>
                        </div>
                    </div>
                </div>
            </template>
        </card>
    </div>
</template>
<script>
import card from '@/components/_common/card.vue';
import { useRouter } from 'vue-router';
import { selfI18n } from '@/i18n/index';

export default {
    components: {
        card
    },
    setup (props, cxt) {
        const $st = selfI18n;
        const router = useRouter();

        const moduleList = [{
            title: $st('wp-wei-bao-kao-qin'),
            appList: [{
                img: require('@/assets/icon_24_daka.svg'),
                name: $st('wp-da-ka'),
                path: '/staff/checkin'
            }, {
                img: '',
                name: '',
                path: ''
            }, {
                img: '',
                name: '',
                path: ''
            }]
        }, {
            title: $st('wp-wei-bao-ke-hu'),
            appList: [{
                img: require('@/assets/icon_24_kehuguanli.svg'),
                name: $st('wp-ke-hu-guan-li'),
                path: '/customerManage'
            }, {
                img: '',
                name: '',
                path: ''
            }, {
                img: '',
                name: '',
                path: ''
            }]
        }];

        const toPage = (app) => {
            router.push({
                path: app.path
            });
        };

        return {
            moduleList,
            toPage
        };
    }
};
</script>
<style scoped lang="scss">
.all {
    padding: 10px;
    .mb10 {
        margin-bottom: 10px;
    }
    .title-box {
        padding: 16px 15px 12px;
        color: rgba(0,0,0,0.40);
        font-size: 13px;
    }
    .content {
        display: flex;
        .app {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 23px 0 31px;
            &:last-child {
                border-right: none;
            }
            .app-item {
                text-align: center;
                .app-name {
                    margin-top: 12px;
                    font-size: 13px;
                }
            }
        }
    }
    --van-gray-3: #f1f1f1;
}
</style>
